<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路演视频</title>
    <link href="../css/home.css" rel="stylesheet" type="text/css">
    <link href="../css/projects.css" rel="stylesheet" type="text/css">
    <link href="../css/banner.css" rel="stylesheet" type="text/css">
    <link href="http://g.tbcdn.cn/sj/wqui/1.0.0/css/sui.min.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../js/slides.jquery.js"></script>
    <script type="text/javascript" src="../js/animation.js"></script>


    <script src="http://g.tbcdn.cn/sj/wqui/1.0.0/js/sui.min.js"></script>

</head>

<body>
<div class="container" style="width: 100%; overflow: hidden;">
    <!-- 导航 -->
    <object id="headerObject" data="header.html"></object>
    <div style="height: 65px;"></div>
    <div class="index_text">
        <span class="label_size_4 label_color_1">推荐路演</span>
        <span class="label_size_1 label_color_2">&nbsp;跟优秀投资人一起投资，用更少的资金，担更低的风险</span>
        <!-- banner -->
        <div class="bannerVideo" id="indexslider">
            <div class="index-img roadVideo" style="border: 3px #fff solid; overflow:hidden;">
                <img src="../images/video.png">
                <img src="../images/video.png">
                <img src="../images/video.png">
                <img src="../images/video.png">
            </div>
           <div class="video_zero">
               <div class="ok_bg zero_logo"></div>
               <div class="zeroTitle">
                   <span class="label_3">零库房轻奢汇</span>
               </div>
               <div class="zero_text">
                   <span>行业：服装</span>
                   <span>城市：北京市&nbsp;&nbsp;东城区</span>
                   <span><label style="float: left">介绍：</label>
                       <div>
                           <label>
                                多品牌集合买手店高端女装多品牌集合买手店
                            </label>
                       </div>
                   </span>

               </div>
               <ul class="index-pagination">
                   <li><a>
                       <div><span></span></div>
                   </a></li>
                   <li><a>
                       <div><span></span></div>
                   </a></li>
                   <li><a>
                       <div><span></span></div>
                   </a></li>
                   <li><a>
                       <div><span></span></div>
                   </a></li>
               </ul>
           </div>

        </div>
    </div>
    <div class="index_text">
        <span class="label_size_4 label_color_1">热门路演</span>
        <div style="height: 30px;"></div>
        <div class="spt_list">
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>
            <div class="spt_list_div">
                <div class="spt_list_body">
                    <img src="../images/video.png">
                    <header>云之源</header>
                    <label>以原汁原味原生态为产品品质核心。</label>
                    <span>地址：北京市&nbsp;&nbsp;朝阳区</span>
                    <span>行业：美食</span>
                </div>
                <div class="spt_list_fot">
                    <img src="../images/list_mes.png" />
                    <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                    <img src="../images/list_hand.png" />
                    <label class="label_12 label_font_arial label_color_2">4</label>
                    <a href="javascript:void(0);" class="sui-btn-1 btn-width-7 btn-warning a_decoration">
                        <span class="label_12">预热中</span></a>
                    </a>
                </div>
            </div>

            <div class="justify"></div>
            <div class="justify"></div>
            <div class="justify"></div>
            <div class="justify"></div>
        </div>

        <div class="video_more">
            <a>更多视频</a>
        </div>
    </div>

    <div class="video_show_bg"></div>
    <div class="video_show">
        <video width="1112" height="630">
            <source src="../video/movie.mp4" type="video/mp4">
            <source src="../video/movie.ogg" type="video/ogg">
        </video>
        <div class="return_btn">
            <a href="#" id="returnBtn">
                <img src="../images/share.png">&nbsp;返回
            </a>
        </div>
        <div class="video_show_footer">
            <div class="spt_list_fot">
                <img src="../images/eye_1.png" />
                <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                <img src="../images/heart.png" />
                <label class="label_12 label_font_arial label_color_2">2</label>&nbsp;
                <img src="../images/mes_1.png" />
                <label class="label_12 label_font_arial label_color_2">4</label>
            </div>
        </div>
        <div class="progressTime">
            <div class="arrow"></div>
            <div class="pause"></div>
            <div class="time">
                <span class="current"></span>&nbsp;/
                <span class="duration"></span>
            </div>

        </div>
        <div class="progressBar">
            <div class="timeBar"></div>
            <div class="circle"></div>
        </div>
    </div>
</div>
<object width="100%" height="260" data="footer.html"></object>

<script type="text/javascript">
    $(function(){

        $('.video_show, .video_show_bg').hide();

        var video = $('.video_show video');

        $('.roadVideo img').click(function() {

            // 更新当前HTML5视频播放时间
            video.on('timeupdate', function() {
                //获得当前播放时间
                var currentPos = video[0].currentTime.toFixed(0);
                //获得影片播放时间
                var maxDuration = video[0].duration.toFixed(0);

                $('.current').text(formatTime(currentPos));
                $('.duration').text(formatTime(maxDuration));
                var percentage = 99 * currentPos / maxDuration; //百分比
                $('.timeBar').css('width', percentage +'%');
                $('.circle').css('left', percentage + '%');

                $('.arrow').show();
                $('.pause').hide();
            });

            // 弹出视频窗口，播放
            $('.video_show, .video_show_bg').show();
            video[0].play();
            $('body').scrollTop = 0;
            $('body').css('position', 'fixed');
        });

        $('.arrow').click(function(){
            video[0].pause();
            $('.pause').show();
            $('.arrow').hide();
        });

        $('.pause').click(function(){
            video[0].play();
            $('.pause').hide();
            $('.arrow').show();
        });


        $('.video_show video').click(function(){
            if($(this)[0].paused) {
                $('.video_show, .video_show_bg').show();
                $(this)[0].play();
                $('body').scrollTop = 0;
                $('body').css('position', 'fixed');
            }
            else {
                $('.video_show, .video_show_bg').hide();
                $('body').removeClass('position', 'fixed');
                video[0].pause();
            }
        });

        $('#returnBtn').click(function(){
            $('.video_show video')[0].pause();
            $('.video_show, .video_show_bg').hide();
            $('body').removeClass('position', 'fixed');
        });


        var timeDrag = false;
        $('.progressBar').mousedown(function(e) {
             timeDrag = true;
             updatebar(e.pageX);
        });
        $(document).mouseup(function(e) {
            if(timeDrag) {
                //停止拖动，设置timeDrag为false
                timeDrag = false;
                updatebar(e.pageX);
            }
        });

         $(document).mousemove(function(e) {
             if(timeDrag) {
                 updatebar(e.pageX);
             }
         });
         var updatebar = function(x) {
             var progress = $('.progressBar');
             var maxduration = video[0].duration;
             var position = x - progress.offset().left;
             var percentage = 100 * position
             //检查拖动进度条的范围是否合法
             if(percentage > 100) {
                 percentage = 100;
             }
             if(percentage < 0) {
                 percentage = 0;
             }

         //Update progress bar and video currenttime
         $('.timeBar').css('width', percentage+'%');
             video[0].currentTime = maxduration * percentage / 100;
         };


     });

    // 时间转化
    function formatTime(s) {
        if(s > -1) {
            var min = Math.floor(s / 60) % 60;
            var sec = s % 60;
        }
        if (min < 10) {
            min = '0' + min;
        }
        if (sec < 10) {
            sec = '0' + sec;
        }
        return min + ":" + sec;
    }

</script>
</body>
</html>
